<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="shortcut icon" th:href="@{/static/favicon.ico}">
    <link th:href="@{/static/css/bootstrap.min.css?v=3.3.7}" rel="stylesheet">
    <link th:href="@{/static/css/font-awesome.css?v=4.4.0}" rel="stylesheet">

    <!-- Data Tables -->
    <link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">

    <link th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link th:href="@{/static/css/style.css?v=4.1.0}" rel="stylesheet">

    <!-- 全局js -->
    <script th:src="@{/static/js/jquery.min.js?v=2.1.4}"></script>
    <script th:src="@{/static/js/bootstrap.min.js?v=3.3.7}"></script>
    <script th:src="@{/static/js/plugins/jeditable/jquery.jeditable.js}"></script>
    <!-- Data Tables -->
    <script th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}"></script>
    <script th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}"></script>

    <!--引入layer插件-->
    <script th:src="@{/static/js/plugins/layer/layer.min.js}"></script>

    <!--引入二次封装的layer-->
    <script th:src="@{/static/js/myLayer.js}"></script>

</head>
<body class="gray-bg">
    <form th:action="@{/role}" method="post" id="ec" name="ec">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <table class="table form-table margin-bottom10">
                                <tr>
                                    <td>
                                        <input type="text" name="roleName" th:value="${#maps.containsKey(filters, 'roleName')} ? ${filters.roleName} : ''" placeholder="角色名称" class="input-sm form-control"/>
                                        <input type="text" name="pageNum" th:value="${filters.pageNum}" />
                                        <input type="text" name="pageSize" th:value="${filters.pageSize}" />
                                    </td>
                                </tr>
                            </table>

                            <div>
                                <button type="button" class="btn btn-sm btn-primary" onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索</button>
                                <button type="button" class="btn btn-sm btn-primary create">添加</button>
                                <button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新</button>
                            </div>
                            <table class="table table-striped table-bordered table-hover dataTables-example">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>角色名称</th>
                                    <th>角色编码</th>
                                    <th>描述</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="gradeX" th:each="item,it : ${page.list}">
                                    <td class="text-center" th:text="${it.count}">11</td>
                                    <td th:text="${item.roleName}">22</td>
                                    <td th:text="${item.roleCode}">33</td>
                                    <td th:text="${item.description}">33</td>
                                    <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33</td>
                                    <td class="text-center">
                                        <a class="edit" th:attr="data-id=${item.id}">修改</a>
                                        <a class="delete" th:attr="data-id=${item.id}">删除</a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">
                                        显示 <span th:text="${page.startRow}"></span> 到 <span th:text="${page.endRow}"></span> 项，共 <span th:text="${page.total}"></span> 项
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
                                        <ul class="pagination">
                                            <li class="paginate_button previous disabled" aria-controls="DataTables_Table_0" tabindex="0"
                                                id="DataTables_Table_0_previous">
                                                <a href="#">上一页</a>
                                            </li>

                                            <li th:each="num : ${page.navigatepageNums}" th:class="${page.pageNum == num} ? 'paginate_button active' : 'paginate_button' " aria-controls="DataTables_Table_0" tabindex="0">
                                                <a th:href="'javascript:document.forms.ec.pageNum.value='+${num}+';document.forms.ec.submit();'" th:text="${num}">2</a>
                                            </li>

                                           <!-- <li class="paginate_button active" aria-controls="DataTables_Table_0" tabindex="0">
                                                <a href="#">1</a>
                                            </li>
                                            <li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0">
                                                <a href="#">2</a>
                                            </li>
                                            <li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0">
                                                <a href="#">3</a>
                                            </li>
                                            <li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0">
                                                <a href="#">4</a>
                                            </li>
                                            <li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0">
                                                <a href="#">5</a>
                                            </li>
                                            <li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0">
                                                <a href="#">6</a>
                                            </li>-->
                                            <li class="paginate_button next" aria-controls="DataTables_Table_0" tabindex="0"
                                                id="DataTables_Table_0_next">
                                                <a href="#">下一页</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>



<script th:inline="javascript">
    $(function(){
        $(".create").on("click",function () {
            opt.openWin("/role/create","新增角色",580,430);
        });
        $(".edit").on("click",function () {
            var id = $(this).attr("data-id")
            opt.openWin("/role/edit/" + id,"修改角色",580,430);
        });
        $(".delete").on("click",function () {
            var id = $(this).attr("data-id")
            opt.confirm("/role/delete/" + id,"你清楚你在干什么嘛？？")
        })
    });
</script>

</body>
</html>